<template>
  <div class="Newsupply">
    <div class="detPgHeader">
      <div class="detPgHeaderleft">
        <span class="side_1"></span>
        <span class="add_1">{{ title }}</span>
      </div>
      <el-button type="info" icon="el-icon-back" onclick="window.history.go(-1)">返回</el-button>
    </div>
    <!--供应商信息-->
    <div class="herd_tow_brgs">
      <div class="herd_tow_bt">供应商信息</div>
      <el-form :model="supplierData" :inline="true" class="demo-form-inline"
               label-width="120px">
        <el-form-item label="供应商编号">
          <el-select disabled v-model="supplierData.Suppliernumber" placeholder="请选择" @change="showSupplier()">
            <el-option
              v-for="item in optionsSupplier"
              :key="item.Id"
              :label="item.enterpriseNumber"
              :value="item.enterpriseNumber">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input disabled v-model="supplierData.supplierName"></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input disabled v-model="supplierData.lianxiren"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input disabled v-model="supplierData.phone"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="企业地址">
          <el-input disabled v-model="supplierData.address"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <!--合同信息-->
    <div class="herd_tow_brgs">
      <div class="herd_tow_bt">合同信息</div>
      <el-form :model="contractData" :inline="true" class="demo-form-inline"
               label-width="120px">
        <el-form-item label="合同编号">
          <el-input disabled v-model="contractData.contractNumber"></el-input>
        </el-form-item>
        <el-form-item label="合同类型">
          <el-select disabled v-model="contractData.leixing" placeholder="请选择">
            <el-option
              v-for="item in optionsContractType"
              :key="item.value"
              :label="item.msg"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select disabled v-model="contractData.status" placeholder="请选择">
            <el-option
              v-for="item in optionsStatue"
              :key="item.value"
              :label="item.msg"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="币别">
          <el-select disabled v-model="contractData.bibie" placeholder="请选择">
            <el-option
              v-for="item in optionsCurrency"
              :key="item.value"
              :label="item.msg"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <br>
        <el-form-item label="生效日期">
          <el-date-picker
            disabled
            v-model="contractData.shengxiaoTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="失效日期">
          <el-date-picker
            disabled
            v-model="contractData.shixiaoTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <!--产品价格-->
    <div class="herd_tow_brgs">
      <div class="herd_tow_bt">产品价格</div>
      <el-table
        :header-cell-style="headerStyle"
        :cell-style="cellStyle"
        :data="tableDataProductPrice"
        :height="230"
        :max-height="230"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          align="center"
          label="产品图号"
          prop="tuHao"
          width="180">
          <template v-slot="scope">
            <el-input disabled v-model="scope.row.productTuhao"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="产品名称">
          <template v-slot="scope">
            <el-input disabled v-model="scope.row.productName"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="单位">
          <template v-slot="scope">
            <el-input disabled v-model="scope.row.danwei"></el-input>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="价格(元)">
          <template v-slot="scope">
            <el-input disabled v-model="scope.row.price"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center" width="130"
          label="税率">
          <template v-slot="scope">
            <el-input disabled v-model="scope.row.shuilv"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="生效日期">
          <template v-slot="scope">
            <el-date-picker
              disabled
              v-model="scope.row.shengxiaoTime"
              style="width: 160px"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column
          prop="statue" align="center" width="130"
          label="状态">
          <template v-slot="scope">
            <el-select disabled v-model="scope.row.status" placeholder="请选择">
              <el-option
                v-for="item in optionsProductStatue"
                :key="item.value"
                :label="item.msg"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="操作">
           <template v-slot="scope">
             <el-button type="primary" size="small" @click="addRow()">新增</el-button>
             <el-button
               type="danger"
               icon="el-icon-delete"
               @click="resetForm(scope)"
               v-if="scope.$index!==0"
               size="small"
             />
           </template>
         </el-table-column>-->
      </el-table>
    </div>
    <!--bottom 按钮    onclick="window.history.go(-1)"-->
    <div class="from_tab_btn">
      <el-button v-if="isDetail=='false'" @click="pass(1)" type="primary" size="small">通过</el-button>
      <el-button v-if="isDetail=='false'" @click="dialogVisible_refuse=true" type="info" size="small">驳回</el-button>
      <el-button v-if="isDetail=='true'" type="info" size="small" onclick="window.history.go(-1)">取消</el-button>
    </div>
    <!--============================弹框=========================================-->
    <el-dialog
      title="驳回理由"
      :visible.sync="dialogVisible_refuse"
      width="30%"
      append-to-body>
      <el-input v-model="bohui"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible_refuse = false">取 消</el-button>
    <el-button type="primary" @click="pass(2)">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {validateNumber} from "@/utils/verificaRules";
import axios from "axios";

export default {
  name: "ExamineManageDetailPurchaseContract",
  components: {},
  data() {
    return {
      /*===============================================*/
      dialogVisible_refuse: false,
      /*===========页面的初始化参数====================*/
      id: 0,
      type: 0,
      isDetail: false,
      title: "采购合同详情",
      checkFolwId:0,
      bohui: "",//驳回理由
      supplierDetail: {},
      optionsContractType: [
        {value: "0", msg: "长期合作"},
        {value: "1", msg: "短期合作"},
        {value: "2", msg: "短期合作"},
      ],
      optionsStatue: [
        /*状态:1:待审核:2:驳回 3:已成功:4:开启.5:关闭*/
        {value: 1, msg: "待审核"},
        {value: 2, msg: "驳回"},
        {value: 3, msg: "已成功"},
        {value: 4, msg: "开启"},
        {value: 5, msg: "关闭"},
      ],
      optionsCurrency: [{value: "0", msg: "人民币"}, {value: "1", msg: "美元"}, {value: "2", msg: "其他"}],
      supplierData: {
        Suppliernumber: "", supplierName: "", lianxiren: "", phone: "", address: "",
      },
      //产品价格
      tableDataProductPrice: [{}],
      optionsSupplier: [],//供应商
      optionsProductStatue: [
        /*1:待审核:2:驳回3:已成功:4关闭*/
        {value: 1, msg: "待审核"},
        {value: 2, msg: "驳回"},
        {value: 3, msg: "已成功"},
        {value: 4, msg: "关闭"},
      ],
      canedit: true,//是否可以编辑
      rules: {
        price: [{required: true, message: "输入不正确"}, {validator: validateNumber, trigger: 'blur'}]
      },
      contractData: {Take_effect: "", Invalidation: ""},//合同信息
      supplierId: 0,
    };
  },
//监听属性 类似于data概念",
  computed: {},
//监控data中的数据变化",
  watch: {},
//方法集合",
  methods: {
    pass: function (type) {
      const message = JSON.parse(localStorage.getItem("message"))
      if (type == 1) {//通过
        const param = {
          "bohui": "",
          "checkFolwId": this.checkFolwId,
          "shengheMessageId": this.id,
          "status": 3,
          "userId": message.Id,
          "userName": message.Name
        }
        axios.post("/JX_java/procurement/caigoushenghe/updatestatus", param).then(res => {
          console.log()
          if (res.data.data == "操作成功") {
            this.$message.success(res.data.data);
            window.history.go(-1);
          } else {
            this.$message.error(res.data.data);
          }
        })
      }
      if (type == 2) {
        if (this.bohui == "") {
          this.$message.error("对不起驳回理由不能为空!")
          return;
        }
        const param = {
          "bohui": this.bohui,
          "checkFolwId": this.checkFolwId,
          "shengheMessageId": this.id,
          "status": 2,
          "userId": message.Id,
          "userName": message.Name
        };
        //通过
        axios.post("/JX_java/procurement/caigoushenghe/updatestatus", param).then(res => {
          console.log(res.data.data)
          if (res.data.data == "操作成功") {
            this.$message.success(res.data.data);
            this.bohui=""
            this.dialogVisible_refuse = false
            window.history.go(-1);
          } else {
            this.$message.error(res.data.data);
          }
        })
      }
    },
    getSupplier(id) {
      axios.get("/JX_java/procurement/supplier/getSupplierDetais?supplierId=" + id).then(res => {
        this.supplierDetail = res.data.data;
        console.log(this.supplierDetail, "this.supplierDetail");
      })

    },
    showSupplier() {
      this.optionsSupplier.forEach(e => {
        if (e.enterpriseNumber == this.supplierData.Suppliernumber) {
          this.supplierData.name = e.enterpriseName
          this.supplierData.lianxiren = e.contacts
          this.supplierData.phone = e.contactsPhone
          this.supplierData.address = e.enterpriseAdress
          this.supplierId = e.id;
        }

      })

    },
    async getOwnSuppers() {
      let s = JSON.parse(localStorage.getItem("message"));
      axios.get("/JX_java/common/getSupperList?udserId=" + s.Id).then(res => {
        this.optionsSupplier = res.data.data;
      })
    },
    // 表头行高与字体
    headerStyle() {
      return {
        'font-size': '14px',
        height: '40px',
        padding: '0'
      }
    },
// 内容行高与字体
    cellStyle() {
      return {
        'font-size': '14px',
        height: '45px',
        padding: '0'
      }
    },
    //动态增加行
    addRow() {
      const list = {
        tuHao: ""
      };
      this.tableDataProductPrice.push(list);
    },
    //动态删除行
    resetForm(e) {

      this.tableDataProductPrice.splice(e.$index, 1);
    },
    //详情or编辑
    getData_Detail(id) {
      axios.get("/JX_java/procurement/caigouhetong/getContractDetails?scId=" + id).then(res => {
        console.log(res.data.data)//res.data.supplierId
        const _this = this;
        this.optionsSupplier.forEach(e => {
          if (e.id == res.data.data.supplierId) {
            this.supplierData.name = e.enterpriseName;
            this.supplierData.Suppliernumber = e.enterpriseNumber;
            this.supplierData.lianxiren = e.contacts
            this.supplierData.phone = e.contactsPhone
            this.supplierData.address = e.enterpriseAdress
            this.supplierId = e.id;
            return;
          }
        })
        //合同详情
        this.contractData.number = res.data.data.contractNumber
        this.contractData.type = parseInt(res.data.data.leixing)
        this.contractData.statue = parseInt(res.data.data.status);
        this.contractData.currency = parseInt(res.data.data.bibie);
        this.contractData.Take_effect = res.data.data.shengxiaoTime;
        this.contractData.Invalidation = res.data.data.shixiaoTime;
        this.tableDataProductPrice = []
        res.data.data.products.forEach(e => {
          const item = {tuHao: "", productName: "", unit: "", price: 0, taxRate: "", takeEffectTime: "", statue: ""}
          item.tuHao = e.productTuhao;
          item.productName = e.productName;
          item.unit = e.danwei;
          item.price = e.price;
          item.taxRate = e.shuilv;
          item.takeEffectTime = e.shenghebiaoshi;
          item.statue = e.status;
          this.tableDataProductPrice.push(item)
        })
        //产品
      })
    },
    getData(id, type, isDetail,checkFolwId) {
      //console.log(id, type, isDetail)
      axios.get("/JX_java/procurement/caigoushenghe/getshengHeDetails?shengheMessageId=" + id + "&&checkFlowId=" + checkFolwId).then(res => {
        console.log(res.data)
        const data_res = res.data.data.pojo
        this.checkFlowId=res.data.data.checkFlowId
        this.supplierData.Suppliernumber = data_res.supplierTb.enterpriseNumber
        this.supplierData.supplierName = data_res.supplierTb.enterpriseName
        this.supplierData.lianxiren = data_res.supplierTb.contacts
        this.supplierData.phone = data_res.supplierTb.contactsPhone
        this.supplierData.address = data_res.supplierTb.enterpriseAdress
        this.contractData.contractNumber = data_res.contractNumber
        this.contractData.leixing = data_res.leixing
        this.contractData.status = data_res.status
        this.contractData.bibie = data_res.bibie
        this.contractData.shengxiaoTime = data_res.shengxiaoTime
        this.contractData.shixiaoTime = data_res.shixiaoTime
        this.tableDataProductPrice = data_res.products
      })

    },
  },
//生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {
  },
//生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    this.id = this.$route.query.id;
    this.type = this.$route.query.type;
    this.isDetail = this.$route.query.statue;
    this.checkFolwId=this.$route.query.checkFolwId;
    console.log(this.isDetail == this.$route.query.statue)
    this.getData(this.id, this.type, this.isDetail,this.checkFolwId)
  },
//生命周期 - 挂载之前",html模板未渲染
  beforeMount() {
  },
//生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
  },
//生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {
  },
//生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {
  },
//生命周期 - 销毁之前",
  beforeDestroy() {
  },
//生命周期 - 销毁完成",
  destroyed() {
  },
//如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {
  },
}
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.Newsupply {
  border-top: 1px solid transparent;
  animation: fade-in; /*动画名称*/
  animation-duration: 0.4s; /*动画持续时间*/
  -webkit-animation: fade-in 0.4s; /*针对webkit内核*/
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  /*初始状态 透明度为0*/
  40% {
    opacity: 0;
  }
  /*过渡状态 透明度为0*/
  100% {
    opacity: 1;
  }
  /*结束状态 透明度为1*/
}

@-webkit-keyframes fade-in { /*针对webkit内核*/
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.Newsupply .detPgHeader {
  border: 1px solid transparent;
  box-sizing: border-box;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  margin-bottom: 10px;
}

.Newsupply .detPgHeader .side_1 {
  width: 5px;
  height: 16px;
  background-color: $Header_color;
  display: inline-block;
}

.Newsupply .detPgHeader .add_1 {
  margin-left: 5px;
  font-size: 18px;
  font-weight: 400;
}

.Newsupply .herd_tow_brgs {
  background-color: $white;
  margin: 0 20px 20px;
  overflow: hidden;
  border: 1px solid $bordercolor;
  border-radius: 5px;
}

.Newsupply .herd_tow_bt {
  height: 50px;
  border-bottom: 1px solid $bordercolor;
  margin-bottom: 20px;
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.Newsupply .Botm_PtnRpo {
  margin: 20px;
  text-align: center;
  padding: 20px;
  background: white
}

.from_tab_btn {
  text-align: center;
  margin-top: 30px;
}
</style>
